<template>
  <button type="button" :class="'ee-button ' + (color ? colorString : (plain ? '-plain' : ''))">
    <slot name="icon">
      <ee-shape :shape="icon" />
    </slot>
    <slot></slot>
  </button>
</template>

<script type="text/javascript">
import { withDefault } from '../__mixin/color';
/**
 * 插槽
 */
export default {
  name: "ee-button",
  mixins: [withDefault('', 0, 0, 1, 0)],
  props: {
    /** 图标class名，参见ee-icon */
    icon: String,
  },
  slots: {
    /** 展示在文本左侧的图标，默认显示 props.icon 的图标 */
    icon: {
      /** props.icon 传入的图标
       * @type {string}
       */
      icon: null,
    },
    /** 居中的内容 */
    default: {}
  },
}
</script>

<style lang="scss">
.ee-button {
  // position: relative;
  vertical-align: baseline;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ee-button-padding);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--ee-border-radius);
  cursor: pointer;
  font-size: 1em;
  background-color: transparent;
  gap: .25em;
  text-wrap: nowrap;

  border-color: var(--text8);
  background-color: var(--ee-bgcolor);

  &:not([disabled]):hover, &:not([disabled]).active {
    color: var(--primary0);
    border-color: var(--primary5);
    background-color: var(--primary9);
  }

  &:not([disabled]):active {
    color: var(--primary-1);
    border-color: var(--primary0);
  }

  &[class*="-plain"] {
    background-color: transparent;
  }
}
</style>